<template>
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(banner,index) in banners" :key="index">
            <a href="">
                <img :src="banner.url" alt="">
            </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-next" slot="pagination"></div>
        <div class="swiper-button-prev" slot="pagination"></div>
    </swiper>
</template>

<script>
export default {
    name: 'carrousel',
    data() {
        return {
            swiperOptions: {
                pagination: {
                    el: '.swiper-pagination'
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: true
            },
            banners: []
        }
    },
    async created() {
        this.banners = await this.axios.get('swiper')
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper
        }
    },
    mounted() {
        this.swiper.slideTo(3, 1000, false)
    }
}
</script>
<style lang="scss" scoped>
.swiper-button-next {
    color: #6b7280 !important;
}

.swiper-button-prev {
    color: #6b7280 !important;
}
</style>
